<template>

<el-form 
    :model="employee"
    class="my-from"
>
  <el-form-item label="名称">
    <el-input v-model="employee.name"></el-input>
  </el-form-item>
  <el-form-item label="部门">
    <!-- <el-input v-model="employee.department"></el-input> -->
    <el-select
        style="width: 500px"
        v-model="employee.department"
        placeholder="请选择部门"
    >
        <el-option
            v-for="item in departmentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>

  </el-form-item>
  <el-form-item label="入职时间">
    <!-- <el-input v-model="employee.hiredate"></el-input> -->
    <el-date-picker
        style="width: 500px"
        v-model="employee.hiredate"
        value-format='yyyy-mm-dd'
    >
    </el-date-picker>
  </el-form-item>
    <el-form-item
        label="职级"
    >
        <el-input v-model="employee.level" ></el-input>
    </el-form-item>
    <el-form-item>
        <el-button
            type="primary"
            @click="handleSubmit"
        >
            {{ method === 'create' ? '新增' : '修改' }}
        </el-button>
    </el-form-item>
</el-form>

</template>

<script>

import { mapState } from 'vuex'

    export default {
        data() {
            return {
                departmentOptions: [
                    { label: '技术部', value: '1' },
                    { label: '财务部', value: '2' },
                    { label: 'CEO offace', value: '3' },
                ],
                employee: {
                    name: '',
                    department: '',
                    hiredate: '',
                    level: '',
                },
                method: 'create', // create | update
            }
        },
        created () {
            const { id } = this.$route.query
            if (id) {
                this.method = 'update'
                let index = this.employeeState.map.get(parseInt(id))
                let employee = this.employeeState.list[index]
                if (employee) {
                    this.employee = employee
                }
            } else {
                this.method = 'create'
            }
        },
        methods: {
            async handleSubmit() {
                if (this.method === 'create') {
                    // 新增
                    await this.$store.dispatch('add', this.employee)
                } else if (this.method === 'update') {
                    // 修改
                    console.log('修改');
                    await this.$store.dispatch('udpate', this.employee)
                }
                this.$router.push('/dashboard/employee')
            }
        },
        computed: {
            ...mapState({
                employeeState: state => state.employee.list
            })
        },
    }
</script>

<style lang="css" scoped>
    .my-from{
        width: 500px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
    }
</style>